<template>
	<view>

		<!-- 加载中 -->
		<view v-if="showLoading"
			class="position-fixed top-0 bottom-0 left-0 right-0 bg-light flex align-center justify-center"
			style="z-index: 100;">
			<text class="text-muted font">加载中...</text>
		</view>

		<view class="flex align-center justify-center" style="height: 350rpx;">
			<text style="font-size: 50rpx;">{{ type === 'login'?'用户登录' : '用户注册' }}</text>
		</view>
		<view class="px-3">
			<input type="text" v-model="form.username" class="bg-light px-3 mb-3 font" placeholder="请输入用户名"
				style="height: 100rpx;" />
			<picker mode="selector" :value="classes[classIndex].id" :range="classes" :range-key="'name'" @change="classChange" v-if="type !== 'login'" class="bg-light px-3 mb-3 font">
				<view class="picker" v-if="form.class_id">
					{{ classes[classIndex].name }}
				</view>
				<view class="bg-light mb-3 font text-muted" v-else>请选择所在班级</view>
			</picker>	
			<input type="password" v-model="form.password" class="bg-light px-3 mb-3 font" placeholder="请输入密码"
				style="height: 100rpx;" />
			<input type="password" v-if="type != 'login'" v-model="form.repassword" class="bg-light px-3 mb-3 font"
				placeholder="请输入确认密码" style="height: 100rpx;" />
		</view>

		<view class="p-3 flex align-center justify-center">
			<view class="bg-main rounded p-3 flex align-center justify-center flex-1 " hover-class="bg-main-hover"
				@click="submit">
				<text class="text-white font-md">{{ type === 'login'?'登 录' : '注 册' }}</text>
			</view>
		</view>

		<view class="flex align-center justify-center">
			<text class="text-light-muted font p-2" @click="changeType">{{ type === 'login'?'注册账号' : '去登录' }}</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: "login",
				form: {
					username: "",
					password: "",
					repassword: "",
					gender: '',
					class_id:null
				},
				index: 'null',
				classes: [],
				classIndex: 0,
				showLoading: true
			}
		},
		created() {
			let token = uni.getStorageSync('token')
			this.getOpenId()
			this.getClassList()
			return this.showLoading = false
			// 用户已登录
			uni.switchTab({
				url: "../index/index"
			})
		},
		computed: {
			selectClass() {
				return this.classes.filter(item => item.id === this.classIndex);
			},
		},
		methods: {
			// 静默微信登录
			login() {
				//调用微信获取code
				uni.login({
					provider: 'weixin',
					success: (logRes) => {
						this.code = logRes.code
						// 传给后端获取用户信息
						$H.get('/wxapi/login/wxlogin', {
							code: this.code
						}, {
							token: false
						}).then(res => {
							console.log(res)
							this.openId = res.data.loginId
							this.token = res.data.tokenValue
							uni.setStorageSync('userData', JSON.stringify(res.data))
							uni.setStorageSync('token', res.data.tokenValue)
						})
					}
				})
			},
			changeType() {
				this.type = this.type === 'login' ? 'reg' : 'login'
				this.form = {
					username: "",
					password: "",
					repassword: ""
				}
			},
			classChange(e){
				this.classIndex = e.detail.value;
				this.form.class_id = this.classes[this.classIndex].id
			},
			submit() {
				let msg = this.type === 'login' ? '登录' : '注册'
				this.$H.post('/' + this.type, this.form).then(res => {
					if (res.code == 200) {
						console.log(res);
						console.log(this.type);
						if (this.type === 'reg') {
							uni.showToast({
								title: '注册成功,请等待管理员审核',
								icon: 'none'
							});
							this.changeType()
							this.form = {
								username: "",
								password: "",
								repassword: "",
							}
						} else {
							this.$store.dispatch('login', res.data)
							if(res.data.userStatus === 0 ){
								uni.showToast({
								title: '您的账号正在审核中，请耐心等待',
								icon: 'none'
							});
							return;
							}
							if(!res.data.gender || !res.data.phoneNumber || !res.data.birthday || !res.data.class_id){
								uni.showToast({
								title: '登录成功，请继续完善个人信息',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateTo({
									url: ('/pages/my/userinfo')
								})
							}, 2000);
							}else{
								uni.showToast({
									title: '登录成功',
									icon: 'none'
								});
								setTimeout(() => {
									uni.switchTab({
										url: ('/pages/index/index')
									})
								}, 2000);
							}
							
						}
					} else {
						console.log('登录');
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.switchTab({
								url: ('/pages/my/my')
							})
						}, 2000);
						this.$store.dispatch('login', res.data)
					}

				})
			},
			getClassList(){
				this.$H.get('/class/list', {}, {}).then(res => {
					this.classes = res.data
					this.form.class_id = this.classes[this.classIndex].id
					console.log(this.classes)
				});
			},
			handleClassChange(e) {
				this.index = e.detail.value;
				this.form.class_id = this.classes[this.index].id
			},
			getOpenId() {
				let that = this
				uni.login({
					provider: 'weixin',
					success(res) {
						const code = res.code;
						that.$H.post('/user/openid', {
							code: code
						}).then(res2 => {
							console.log(res2)
						})
					}
				});
			}
		}
	}
</script>

<style>

</style>